<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router';

const route = useRoute()

const active = ref(route.name)

</script>

<template>
    <footer>
        <van-tabbar v-model="active">
            <van-tabbar-item name="home" icon="wap-home-o" route to="/home">首页</van-tabbar-item>
            <van-tabbar-item name="find" icon="search" route to="/find">发现</van-tabbar-item>
            <van-tabbar-item name="post" icon="add-o" route to="/post">
                <template #icon>
                    <van-icon name="add" color="red" size="40px"></van-icon>
                </template>
            </van-tabbar-item>
            <van-tabbar-item name="message" icon="chat-o" route to="/message">消息</van-tabbar-item>
            <van-tabbar-item name="my" icon="contact-o" route to="/my">我的</van-tabbar-item>
        </van-tabbar>
    </footer>
</template>